import React from "react";
import "./index.css";

export default function Index(props) {
  // 已完成的
  const finish = props.data.reduce((pre, data) => pre + (data.done ? 1 : 0), 0);
  //全选
  const changeAll = (e) => {
    props.handlecheckAll(e.target.checked);
  };
  const total = props.data.length;
  // 清除全部
  const clearAll = () => {
    props.handleClearAll();
  };
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={finish === total && total !== 0 ? true : false}
          onChange={changeAll}
        />
      </label>
      <span>
        <span>已完成{finish}</span> / 全部{total}
      </span>
      <button onClick={clearAll} className="btn btn-danger">
        清除已完成任务
      </button>
    </div>
  );
}
